<template>
  <back-btn></back-btn>
  <div id="app">
    <h2>shallowRef基本数据类型: {{ refData }}</h2>
    <h2>shallowRef对象: {{ refDataObj }}</h2>
    <h2>shallowReactive只能让第一层数据响应: {{ reactiveData }}</h2>

    <button @click="refData += '响应'">更新shallowRef基本数据类型</button>
    <button @click="refDataObj.name += '响应'">更新shallowRef对象</button>
    <button @click="update">更新shallowReactive对象</button>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef, shallowReactive } from "vue";

const refData = shallowRef("基本数据类型"); // 修改时会更新dom
const refDataObj = shallowRef({ name: "温情key" }); // 修改时不会更新dom

const reactiveData = shallowReactive({
  name: "wq",
  like: {
    game: {
      name: "王者荣耀",
    },
  },
});

function update() {
  // reactiveData.name += "响应";  // 会更新dom
  reactiveData.like.game.name += "响应"; // 不会更新dom
}
</script>

<style scoped></style>
